<template>
  <view class="container">
    <!-- 头部头像和昵称 -->
    <view class="top-info">
      <view class="userImg">
        <u--image :src="userInfo.token ? userInfo.headImgPath : 'http://1.116.226.250/source/image/null.png'"
          shape="circle" width="120" height="120"></u--image>
      </view>
      <view class="username">
        <text>{{userInfo.token ? userInfo.nickname : "微信用户，请登录！" }}</text>
      </view>
    </view>

    <!-- 权限弹窗 -->
    <u-toast ref="uToast"></u-toast>

    <!-- 分割线 -->
    <view class="mid-divider"></view>

    <!-- 功能列表 -->
    <view class="functionList">
      <view class="">
        <view v-for="(item, index) in functionList" :key="index" class="list-box-item" @click="toOtherPage(item)">
          <u-row customStyle="margin-bottom: 10px">
            <u-col span="6">
              <img :src="item.iconPath"><text style="margin-left: 5px;">{{item.name}}</text>
            </u-col>
            <u-col span="4" offset="5">
              <u-icon name="arrow-right" color="#000" size="18"></u-icon>
            </u-col>
          </u-row>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-btn">
      <u-button type="error" text="退出登录" v-if="userInfo.token !== ''" @click="logout"></u-button>
      <u-button type="success" text="登录" v-if="userInfo.token === ''" @click="goLoginPage"></u-button>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        // 下方功能列表
        functionList: [{
            name: "我的订单",
            iconPath: "http://1.116.226.250/source/list_icon/order2.png",
            tag: "order"
          },
          {
            name: "注册商家",
            iconPath: "http://1.116.226.250/source/list_icon/shop.png",
            tag: "businessReg"
          },
          {
            name: "修改个人信息",
            iconPath: "http://1.116.226.250/source/list_icon/personMsg.png",
            tag: "changeInfo"
          },
          {
            name: "修改密码",
            iconPath: "http://1.116.226.250/source/list_icon/passwd.png",
            tag: "changePasswd"
          }
        ],
      };
    },
    computed: {
      ...mapState('user', ['userInfo'])
    },
    methods: {
      // 根据选择列表去不同的页面
      toOtherPage(item) {
        if (item.tag === "order") {
          uni.switchTab({
            url: "/pages/order/order"
          })
        } else {
          if(!this.userInfo.token) {
            this.$refs.uToast.show({
              type: 'error',
              icon: true,
              title: '失败主题',
              message: "请先登录",
              iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
            });
          }

          uni.navigateTo({
            url: this.userInfo.token ? `/components/${item.tag}/${item.tag}` : ''
          })
        }
      },
      // 去登录页，在登录页引入user中对登录的封装
      goLoginPage() {
        uni.navigateTo({
          url: '/components/login/login'
        })
      },
      ...mapMutations('user', ['logout'])
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .top-info {
      width: 100%;
      display: flex;
      flex-direction: row;

      .userImg {
        margin-left: 20rpx;
        margin-top: 20rpx;
      }

      .username {
        font-size: 48rpx;
        margin: auto 0;
        font-weight: 700;
        margin-left: 52rpx;
      }
    }




    .mid-divider {
      width: 90%;
      height: 0px;
      border: 2rpx solid #ccc;
      margin: 0 auto;
      margin-top: 40rpx;
      margin-bottom: 40rpx;
    }

    .functionList {
      width: 680rpx;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      font-size: 17px;
      margin-top: 8px;


      .list-box-item {
        line-height: 40rpx;
        height: 40px;
        width: 100%;
        margin-top: 16rpx;

        img {
          width: 40rpx;
          height: 40rpx;
          vertical-align: bottom;
        }
      }
    }

    .bottom-btn {
      width: 600rpx;
      position: fixed;
      bottom: 30px;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
  }
</style>
